<template>
<el-row class="h_top_bg">
    <el-col :lg="4" :md="6" :xs="0" ></el-col>
    <el-col :lg="16" :md="12" :xs="24">
      <nav class="app-topnav">
        <ul class="flex justify-end items-center">
          <template v-if="$store.state.user">
            <li><a href="javascript:;"><el-icon color="h_icon"><User /></el-icon>{{ $store.state.user.username }}</a></li>
          </template>
          <template v-else>
            <li><a href="javascript:;" @click="$router.push('/login')">请先登录</a></li>
            <li><a href="javascript:;">帮助中心</a></li>
            <li><a href="javascript:;">关于我们</a></li>
          </template>
        </ul>
      </nav>
    </el-col>
    <el-col :lg="4" :md="6" :xs="0"></el-col>
  </el-row>
</template>

<script setup>
</script>

<style lang='scss'>
.h_top_bg {
  background: #333;
  .app-topnav {
    font-size: 14px;
    ul {
      padding: 10px 0;
      li {
        padding: 0 15px;
        a {
          color: #cdcdcd;
          line-height: 1;
          display: inline-block;
        }
        .el-icon {
          margin-right: 3px;
        }
      }
    }
  }
}
</style>